<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div ref="ele">
        <!-- 搜索 -->
        <label class="el-form-item-label">货运状态</label>
        <el-select v-model="query.status" filterable placeholder="全部" clearable style="width: 135px;" class="filter-item" @change="crud.toQuery">
          <el-option label="全部" value="" />
          <el-option label="未发布" value="0" />
          <el-option label="审核中" value="1" />
        </el-select>
        <label class="el-form-item-label">发布日期</label>
        <date-range-picker v-model="query.releaseTime" class="date-item" />
        <label class="el-form-item-label">货物名</label>
        <el-input v-model="query.goodsName" clearable placeholder="货物名" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <el-tooltip slot="right" class="item" effect="dark" content="发布后需管理员审核通过后才正式发布" placement="top-start">
          <el-button
            v-permission="['shippingReleased:issue']"
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-success"
            :loading="syncLoading"
            :disabled="crud.selections.length === 0"
            @click="issue(crud.selections)"
          >发布</el-button>
        </el-tooltip>
      </crudOperation>
    </div>
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="isShow" title="指定详情" width="350px" @close="cancel">
      <el-table ref="formInfo" :data="formInfo" size="mini">
        <el-table-column prop="username" align="center" label="用户账号" width="90" />
        <el-table-column prop="userType" align="center" label="用户类型" width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="scope.row.userType === 4 ? 'success' : 'warning'">
              {{ scope.row.userType | userTypeFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="商户名称" align="center" show-overflow-tooltip width="130">
          <template slot-scope="scope">
            {{ scope.row.merchantName | nullFilter }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!--表单组件-->
    <el-dialog v-dialogDrag :show-close="false" class="transferDialog" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="850px">
      <vue-scroll>
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
          <el-card class="box-card">
            <div slot="header">
              <span>类目</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="出发地" prop="shipDetailAddress" label-width="80px">
                  <el-input
                    v-model="form.shipDetailAddress"
                    class="noBg"
                    placeholder="请选择地址"
                    clearable
                    maxlength="50"
                    :disabled="true"
                  >
                    <el-button slot="append" icon="el-icon-location-outline" @click="selectShipAddress" />
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="出发地简称" prop="startAddress" label-width="100px">
                  <el-input v-model="form.startAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="出发详细地址" prop="shipAddress" label-width="100px">
                  <el-input v-model="form.shipAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="到达地" prop="receiveDetailAddress" label-width="80px">
                  <el-input
                    v-model="form.receiveDetailAddress"
                    class="noBg"
                    placeholder="请选择地址"
                    clearable
                    maxlength="50"
                    :disabled="true"
                  >
                    <el-button slot="append" icon="el-icon-location-outline" @click="selectReceiveAddress" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到达地简称" prop="endAddress" label-width="100px">
                  <el-input v-model="form.endAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="到达详细地址" prop="receiveAddress" label-width="100px">
                  <el-input v-model="form.receiveAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="货物名称" prop="name" label-width="80px">
                  <el-input v-model="form.name" clearable maxlength="20" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="货物类型" prop="freightTransportCode" label-width="80px">
                  <el-select v-model="form.freightTransportCode" size="mini" filterable placeholder="请选择货物类型" @change="selectFreightTypeCode">
                    <el-option
                      v-for="item in freightTypeCodes"
                      :key="item.idStr"
                      :label="item.cname"
                      :value="item.idStr"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>运输公司</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否指定运输公司" prop="radio" label-width="140px">
                  <el-radio-group v-model="form.isAppoint">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="form.isAppoint === 1 " :span="12">
                <el-form-item label="运输公司" prop="transportAssign" label-width="80px">
                  <el-select v-model="form.transportAssign" multiple collapse-tags filterable placeholder="请选择" clearable style="width: 285px;" class="filter-item" @change="selectMerchant">
                    <el-option
                      v-for="item in transports"
                      :key="item.userId"
                      :label="item.merchantName"
                      :value="item.userId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>费用</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="货物数量" prop="weight" label-width="80px">
                  <el-input v-model="form.weight" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="运输费" prop="freightPrice" label-width="80px">
                  <el-input v-model="form.freightPrice" clearable placeholder="运输费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="装车费" prop="loadFee" label-width="80px">
                  <el-input v-model="form.loadFee" clearable placeholder="装车费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="卸车费" prop="unloadFee" label-width="80px">
                  <el-input v-model="form.unloadFee" clearable placeholder="卸车费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="信息费" prop="infoFee" label-width="80px">
                  <el-input v-model="form.infoFee" clearable placeholder="信息费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="磅费" prop="poundsFee" label-width="80px">
                  <el-input v-model="form.poundsFee" clearable placeholder="运输费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>收货人信息</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="姓名" prop="receiveName" label-width="80px">
                  <el-input v-model="form.receiveName" clearable placeholder="收货人姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="receivePhone" label-width="80px">
                  <el-input v-model="form.receivePhone" clearable placeholder="收货人电话" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>拉货时间</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="开始时间" prop="startDate" label-width="80px">
                  <el-date-picker
                    v-model="form.startDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" prop="endDate" label-width="80px">
                  <el-date-picker
                    v-model="form.endDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>其它</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="进矿预计排队时间" prop="joinMouthTime" label-width="140px">
                  <el-input v-model="form.joinMouthTime" clearable placeholder="进矿预计排队时间">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="车辆类型" prop="vehicleTypeId" label-width="80px">
                  <el-select v-model="form.vehicleTypeId" filterable placeholder="请选择" clearable @change="selectVehicleType">
                    <el-option
                      v-for="item in vehicleTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="装车预计排队时间" prop="loadCarTime" label-width="140px">
                  <el-input v-model="form.loadCarTime" clearable placeholder="装车预计排队时间">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="车辆长度" prop="vehicleLengthId" label-width="80px">
                  <el-select v-model="form.vehicleLengthId" filterable placeholder="请选择" clearable @change="selectVehicleLengths">
                    <el-option
                      v-for="item in vehicleLengths"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="最低载重" prop="lowWeight" label-width="140px">
                  <el-input v-model="form.lowWeight" clearable placeholder="最低载重">
                    <template slot="append">吨</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="备注" prop="remark" label-width="140px">
                  <el-input
                    v-model="form.remark"
                    clearable
                    type="textarea"
                    placeholder="请输入内容"
                    :autosize="{ minRows: 4, maxRows: 8}"
                    maxlength="200"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>预约</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否预约上架" prop="isUp" label-width="140px">
                  <el-radio-group v-model="form.isUp">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="form.isUp === 1" :span="12">
                <el-form-item label="预约上架时间" prop="upTime" label-width="140px">
                  <el-date-picker
                    v-model="form.upTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否预约下架" prop="isDown" label-width="140px">
                  <el-radio-group v-model="form.isDown">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="form.isDown === 1" :span="12">
                <el-form-item label="预约下架时间" prop="upTime" label-width="140px">
                  <el-date-picker
                    v-model="form.downTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </vue-scroll>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取 消</el-button>
        <el-button v-loading.fullscreen.lock="fullscreenLoading" type="success" @click="save(false)">保  存</el-button>
        <el-button v-loading.fullscreen.lock="fullscreenLoading" type="primary" @click="save(true)">发  布</el-button>
      </div>
    </el-dialog>
    <div class="panel">
      <map-select v-if="showOperationShip" :show-operation.sync="showOperationShip" :match-data="matchData" :form-data="shipForm" @confirm="getShipPoints" />
      <map-select v-if="showOperationReceive" :show-operation.sync="showOperationReceive" :match-data="matchData" :form-data="receiveForm" @confirm="getPointsReceive" />
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :height="tableHeight"
      :summary-method="getCommSummaries({customer: crud.totalObject, titleIndex: 0})"
      :show-summary="true"
      border
      :data="crud.data"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="60" align="center" />
      <el-table-column prop="transportNo" show-overflow-tooltip align="center" width="170" label="货运号" />
      <el-table-column prop="name" width="90" align="center" label="货物名" show-overflow-tooltip />
      <!--<el-table-column prop="needVehicleNumber" align="center" show-overflow-tooltip width="80" label="需要车辆"></el-table-column>-->
      <el-table-column prop="weight" width="110" align="center" label="货物重量(顿)" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="search-text1">{{ scope.row.weight | nullFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="freightPrice" align="center" show-overflow-tooltip width="110" label="运价(元/吨)">
        <template slot-scope="scope">
          <span class="search-text1">{{ scope.row.freightPrice | nullFilter }}</span>
        </template>
      </el-table-column>
      <!--<el-table-column prop="price" align="center" show-overflow-tooltip width="100" label="货物价格"></el-table-column>-->
      <el-table-column prop="loadFee" width="100" align="center" label="装车费(元)" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="search-text1">{{ scope.row.loadFee | nullFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unloadFee" width="100" align="center" label="卸车费(元)" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="search-text1">{{ scope.row.unloadFee | nullFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="poundsFee" width="100" align="center" label="磅费(元)" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="search-text1">{{ scope.row.poundsFee | nullFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="infoFee" width="100" align="center" label="信息费(元)" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="search-text1">{{ scope.row.infoFee | nullFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" width="80" show-overflow-tooltip label="发布状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'warning' : 'success'">
            {{ scope.row.status | tranportFilter }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" align="center" show-overflow-tooltip width="140" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>

      <el-table-column width="150" align="center" label="发货地" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.shipCity + scope.row.shipDistrict | nullFilter }}
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="收货地" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.receiveCity + scope.row.receiveDistrict | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column width="90" align="center" label="最低载重" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.lowWeight | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="freightTransportName" width="100" align="center" label="货物类型" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.freightTransportName | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="vehicleTypeName" width="90" align="center" label="车辆类型" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.vehicleTypeName | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="vehicleLengthName" width="90" align="center" label="车辆长度" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.vehicleLengthName | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="isAppoint" width="80" align="center" label="指定货运" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="!scope.row.isAppoint"><el-tag type="warning">
            {{ scope.row.isAppoint | boolFilter }}
          </el-tag></span>
          <a v-else class="link" type="primary" @click="changeDriverDetail(scope.row.id)">
            <el-tag>
              {{ scope.row.isAppoint | boolFilter }}
            </el-tag>
          </a>
        </template>
      </el-table-column>

      <el-table-column prop="infoType" width="100" align="center" label="信息类型" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag :type="scope.row.infoType === 1 ? 'warning' : 'info'">
            {{ scope.row.infoType === 1 ? "收费信息" : "免费信息" }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="isPremium" width="100" align="center" label="是否加价" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.isPremium === 1 ? '加价' : '默认' }}
        </template>
      </el-table-column>

      <el-table-column prop="premiumPrice" width="110" align="center" label="加价金额(元)" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.premiumPrice | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="joinMouthTime" align="center" show-overflow-tooltip width="160" label="进矿预计排队时间(分钟)">
        <template slot-scope="scope">
          {{ scope.row.joinMouthTime | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="loadCarTime" align="center" show-overflow-tooltip width="160" label="装车预计排队时间(分钟)">
        <template slot-scope="scope">
          {{ scope.row.loadCarTime | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="startDate" align="center" show-overflow-tooltip width="140" label="开始时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.startDate) }}
        </template>
      </el-table-column>

      <el-table-column prop="endDate" align="center" show-overflow-tooltip width="140" label="结束时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.endDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="shipDetailAddress" width="120" align="center" label="发货人详细地址" show-overflow-tooltip />
      <el-table-column prop="receiveDetailAddress" width="120" align="center" label="收货人详细地址" show-overflow-tooltip />
      <el-table-column prop="level" width="90" align="center" label="货运等级" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.level === 1 ? '优质' : scope.row.level === 2 ? '推荐' : '默认' }}
        </template>
      </el-table-column>

      <el-table-column prop="isUp" width="100" align="center" label="是否预约上架" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.isUp === 1 ? '是' : '否' }}
        </template>
      </el-table-column>

      <el-table-column prop="isDown" width="100" align="center" label="是否预约下架" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.isDown === 1 ? '是' : '否' }}
        </template>
      </el-table-column>

      <el-table-column prop="remark" width="90" align="center" label="备注" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.remark | nullFilter }}
        </template>
      </el-table-column>

      <el-table-column
        v-permission="['shippingReleased:edit','shippingReleased:del']"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
          />
        </template>
      </el-table-column>

    </el-table>
    <!--分页组件-->
    <pagination />
    <div class="panel">
      <form-panel v-if="showFormPanel" :show-form-panel.sync="showFormPanel" :item="selectedItem" @refreshList="crud.toQuery" />
    </div>
  </div>
</template>

<script>
import crudTransport from '@/api/freightManagement/transport'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import MapSelect from '@/components/map/operation.vue'
import DateRangePicker from '@/components/DateRangePicker/index'
import Form from './form'

const defaultForm = { transportId: null, id: null, userId: null, transportNo: null, transportAssigns: [],
  merchantId: null, startAddress: null, endAddress: null, merchantName: null, shipProvince: null, shipCity: null, shipDistrict: null, shipDistrictAdcode: null, shipSubAddress: null, shipMapAddress: null, shipLngX: null, shipLatY: null, shipDetailAddress: null, shipAddress: null,
  receiveProvince: null, receiveCity: null, receiveDistrict: null, receiveDistrictAdcode: null, receiveTownship: null, receiveAddress: null, receiveSubAddress: null, receiveMapAddress: null, receiveLngX: null, receiveLatY: null, receiveDetailAddress: null,
  freightPrice: null, name: null, vehicleTypeId: null, vehicleTypeName: null, vehicleLengthId: null, vehicleLengthName: null,
  freightTypeName: null, freightTypeCode: null, needVehicleNumber: null,
  price: null, weight: null, infoFee: null, loadFee: null, unloadFee: null, poundsFee: null, infoType: null,
  freightTransportName: null, freightTransportCode: null, remark: null, startDate: null, endDate: null,
  level: 0, isShow: 1, isDown: 0, isUp: 0, isGrabSingle: 0, showPosition: 0, status: null, isAppoint: 0, releaseTime: null, orderId: null, joinMouthTime: null,
  loadCarTime: null, lowWeight: null, isPremium: 0, premiumPrice: null, premiumStartDate: null, premiumEndDate: null,
  creator: null, createTime: null, modifier: null, modifyTime: null, receiveName: null, receivePhone: null }
export default {
  name: 'Transport',
  components: { pagination, crudOperation, rrOperation, udOperation, MapSelect, DateRangePicker, 'form-panel': Form },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '货运信息', url: 'api/shippingReleased', idField: 'transportId', sort: 'transportId,desc', crudMethod: { ...crudTransport }})
  },
  data() {
    return {
      showPositions: [
        { label: '默认', value: '0' },
        { label: '系统首页', value: '1' },
        { label: '货运首页抢单', value: '2' },
        { label: '货运首页列表', value: '3' },
        { label: '货运抢单', value: '4' }
      ],
      selectedItem: {},
      operationValue: {},
      showFormPanel: false,
      operationVisible: false,
      receiveForm: {},
      shipForm: {},
      fullscreenLoading: false,
      syncLoading: false,
      operationLoading: false,
      isShow: false,
      showOperationShip: false,
      showOperationReceive: false,
      height: this.getTableHeight({}),
      tableHeight: this.height,
      merchant: [],
      transports: [],
      formInfo: [],
      freightTypeCodes: [],
      merchantUserIds: [],
      merchantNames: [],
      vehicleLengths: [],
      vehicleTypes: [],
      permission: {
        add: ['shippingReleased:add'],
        edit: ['shippingReleased:edit'],
        del: ['shippingReleased:del']
      },
      operationRules: {
        isShow: [
          { required: true, message: '是否显示', trigger: 'blur' }
        ]
      },
      rules: {
        shipDetailAddress: [
          { required: true, message: '请选择出发地', trigger: 'blur' }
        ],
        startAddress: [
          { required: true, message: '出发地简称不能为空', trigger: 'blur' }
        ],
        endAddress: [
          { required: true, message: '到达地简称不能为空', trigger: 'blur' }
        ],
        receiveDetailAddress: [
          { required: true, message: '请选择到达地', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写货物名称', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请填写货物数量', trigger: 'blur' }
        ],
        freightTransportCode: [
          { required: true, message: '请选择货物类型', trigger: 'blur' }
        ],
        transportAssign: [
          { required: true, message: '请选择运输公司', trigger: 'blur' }
        ],
        freightPrice: [
          { required: true, message: '请填写运输费', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请填写开始时间', trigger: 'blur' }
        ],
        endDate: [
          { required: true, message: '请填写结束时间', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'name', display_name: '货物名' }
      ]
    }
  },
  mounted: function() {
    this.tableHeight = this.height - this.$refs.ele.clientHeight
    this.search()
    this.getCategory()
  },
  methods: {
    cancel() {
      this.isShow = false
      this.formInfo = []
      this.$emit('update:isShow', this.isShow)
    },
    operation(datas) {
      const self = this
      const updateData = datas
      if (updateData.length > 1) {
        self.$message({
          message: '不能同时操作多行',
          type: 'warning'
        })
      } else if (updateData.length < 1) {
        self.$message({
          message: '请选择一行数据',
          type: 'warning'
        })
      } else {
        self.operationValue = {
          id: updateData[0].id,
          isShow: updateData[0].isShow,
          isGrabSingle: updateData[0].isGrabSingle,
          startGrabSingle: updateData[0].startGrabSingle,
          endGrabSingle: updateData[0].endGrabSingle,
          showPosition: updateData[0].showPosition,
          level: updateData[0].level,
          sort: updateData[0].sort
        }
        self.operationVisible = true
      }
    },
    approve(datas) {
      const self = this
      const updateData = datas
      if (updateData.length > 1) {
        self.$message({
          message: '不能同时审批多行',
          type: 'warning'
        })
      } else if (updateData.length < 1) {
        self.$message({
          message: '请选择一行数据',
          type: 'warning'
        })
      } else {
        self.selectedItem = Object.assign({}, updateData[0])
        self.selectedItem.transports = self.transports
        self.selectedItem.vehicleLengths = self.vehicleLengths
        self.selectedItem.vehicleTypes = self.vehicleTypes
        self.selectedItem.freightTypeCodes = self.freightTypeCodes
        // self.selectedItem.falg = true
        self.showFormPanel = true
      }
    },
    issue(datas) {
      const issueId = []
      datas.forEach(d => {
        if (d.status === 0) {
          issueId.push(d.id)
        }
      })
      if (issueId.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择未发布的货运',
          type: 'error'
        })
        return
      }
      let msg = ''
      if (issueId.length != datas.length) {
        msg = '（只会发布未发布的货运）'
      }
      this.$confirm(msg + `确认发布选中的数据吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delMethod(datas)
      }).catch(() => {})
    },
    delMethod(key, index) {
      const self = this
      const ids = []
      debugger
      key.forEach(d => {
        ids.push(d.id)
      })
      self.syncLoading = true
      self.$http.put('/api/shippingReleased/issue', { ids: ids })
        .then(function(res) {
          self.syncLoading = false
          if (self.$refs[index]) {
            self.$refs[index].doClose()
          }
          // self.crud.dleChangePage(1)
          self.crud.submitSuccessNotify()
          self.crud.toQuery()
        }).catch(function(error) {
          self.syncLoading = false
          if (self.$refs[index]) {
            self.$refs[index].doClose()
          }
        })
    },
    operationSave(value) {
      const self = this
      self.operationLoading = true
      self.$http.put('/api/transport/operation', self.operationValue)
        .then(function(res) {
          self.operationLoading = false
          self.operationVisible = false
          self.operationValue = {}
          self.crud.toQuery()
        }).catch(function(error) {
          self.operationLoading = false
        })
    },
    save(val) {
      const self = this
      self.$refs['form'].validate((valid) => {
        if (valid) {
          self.fullscreenLoading = true
          self.form.falg = val
          self.$http.post('/api/shippingReleased', self.form)
            .then(function(res) {
              self.fullscreenLoading = false
              self.crud.resetForm()
              self.crud.addSuccessNotify()
              self.crud.status.add = 0
              self.crud.status.edit = 0
              self.crud.toQuery()
            }).catch(function(error) {
              self.crud.status.add = 2
              self.fullscreenLoading = false
              console.log(error)
            })
        }
      })
    },
    selectVehicleLengths(val) {
      if (!val) {
        this.form.vehicleLengthName = null
        return
      }
      let obj = {}
      obj = this.vehicleLengths.find((item) => {
        return item.id === val
      })
      this.form.vehicleLengthName = obj.name
    },
    selectMerchant(val) {
      this.form.transportAssigns = [] // 初始化数据
      for (let i = 0; i <= val.length - 1; i++) {
        this.transports.find((item) => { // 这里的options就是数据源
          if (item.userId == val[i]) {
            this.form.transportAssigns.push({ 'userId': item.userId, 'merchantName': item.merchantName }) // 这里的value我改成了id
          }
        })
      }
    },
    selectVehicleType(val) {
      if (!val) {
        this.form.vehicleTypeName = null
        return
      }
      let obj = {}
      obj = this.vehicleTypes.find((item) => {
        return item.id === val
      })
      this.form.vehicleTypeName = obj.name
    },
    changeDriverDetail(data) {
      const self = this
      self.isShow = true
      self.$http.get('/api/shippingOrder/infoAssign?id=' + data).then(function(res) {
        if (res.ok) {
          self.formInfo = res.data
        }
      }).catch(() => {
        // data.dataStatus = !data.dataStatus
      })
    },
    selectFreightTypeCode(val) {
      if (!val) {
        this.form.freightTransportName = null
        return
      }
      let obj = {}
      obj = this.freightTypeCodes.find((item) => {
        return item.idStr === val
      })
      this.form.freightTransportName = obj.cname
    },
    getShipPoints: function(data) {
      this.form.startAddress = data.mapAddress
      this.form.shipSubAddress = data.subAddress
      this.form.shipDetailAddress = data.address
      this.form.shipDistrictAdcode = data.adcode
      this.form.shipLngX = data.lngX
      this.form.shipLatY = data.latY
      this.form.shipProvince = data.province
      this.form.shipCity = data.city
      this.form.shipDistrict = data.district
      // this.form = Object.assign({}, this.form)
    },
    getPointsReceive: function(data) {
      this.form.endAddress = data.mapAddress
      this.form.receiveSubAddress = data.subAddress
      this.form.receiveDetailAddress = data.address
      this.form.receiveDistrictAdcode = data.adcode
      this.form.receiveLngX = data.lngX
      this.form.receiveLatY = data.latY
      this.form.receiveProvince = data.province
      this.form.receiveCity = data.city
      this.form.receiveDistrict = data.district
      // this.form = Object.assign({}, this.form)
    },
    getCommSummaries({ column, customer, title = '合计', titleIndex }) {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
      return function(param) {
        const sums = []
        const { columns, data } = param
        columns.forEach((columnItem, index) => {
          if ((titleIndex === undefined && columnItem.type === 'index') || index === titleIndex) {
            sums[index] = title
          } else if (customer) {
            sums[index] = customer[columnItem.property] === null || customer[columnItem.property] === undefined || customer[columnItem.property] === '' ? '-' : customer[columnItem.property]
          } else {
            const sumList = []
            column.forEach((e) => {
              if (e.toString().includes('-')) {
                for (let i = Number(e.split('-')[0]); i <= Number(e.split('-')[1]); i++) {
                  sumList.push(i)
                }
              } else {
                sumList.push(Number(e))
              }
            })
            if (sumList.includes(index)) {
              const values = data.map(e => Number(e[columnItem.property]))
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr)
                  if (!isNaN(value)) {
                    return prev + curr
                  } else {
                    return prev
                  }
                }, 0)
                sums[index] += ''
              } else {
                sums[index] = '-'
              }
            }
          }
        })
        return sums
      }
    },
    selectShipAddress() {
      this.matchData = {}
      this.showOperationShip = true
    },
    selectReceiveAddress() {
      this.matchData = {}
      this.showOperationReceive = true
    },
    search() {
      const self = this
      self.$http.get('/api/systemController/getVehicleType').then(function(value) {
        if (value.ok) {
          self.vehicleLengths = value.data.vehicleLengths
          self.vehicleTypes = value.data.vehicleTypes
        }
      })
      self.$http.get('/api/systemController/getTransport').then(function(value) {
        if (value.ok) {
          self.transports = value.data
        }
      })
      self.$http.get('/api/systemController/getMerchantAll').then(function(value) {
        if (value.ok) {
          self.merchant = value.data
        }
      })
    },
    getCategory() {
      const self = this
      self.$http.get('/api/baseCategory/getCateValue?key=' + 'huowu_type').then(function(value) {
        self.freightTypeCodes = value
      })
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
